<template>
  <div>
    <div class="row">
      <div class="col-2"></div>
      <div class="col-7">
        <h3 class="text-center mb-3 font-weight-bold word-width">
          <p>{{dataMsg.title}}</p>
          <small class="text-muted font-italic">{{dataMsg.author}}</small>
        </h3>
        <ul class="list-unstyled text-small text-center word-width">
          <li v-for="item in dataMsg.paragraphs">{{item}}</li>
        </ul>
      </div>
      <div class="col-3"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'SanZiJing',
    data () {
      return {
        dataMsg: {
          'title': '三字經',
          'author': '王應麟',
          'tags': '新版',
          'paragraphs': [
            '人之初，性本善，性相近，習相遠。'
          ]
        }
      }
    },
    computed: {
      dataMessage () {
        return this.$store.getters.dataMsg
      }
    },
    watch: {
      dataMessage () {
        this.dataMsg = this.$store.getters.dataMsg
      }
    },
    mounted: function () {
      if (!this.$store.getters.dataMsg) {
        this.changeUrl()
      }
    },
    methods: {
      changeUrl () {
        let url = null
        if (window.location.href.includes('#/sanzijing')) {
          url = '/mengxue/sanzijing-new.json'
        } else if (window.location.href.includes('#/baijiaxing')) {
          url = '/mengxue/baijiaxing.json'
        } else if (window.location.href.includes('#/qianziwen')) {
          url = '/mengxue/qianziwen.json'
        } else if (window.location.href.includes('#/zhuzijiaxun')) {
          url = '/mengxue/zhuzijiaxun.json'
        } else {
          return
        }
        this.queryDate(url)
      },
      queryDate: function (url) {
        this.$store.dispatch('loadDataMsg', url)
        /* this.$axios.get(url)
          .then(response => {
            this.dataMsg = response.data
          }).catch(error => {
            console.info('Error ' + error)
          }) */
      }
    }
  }
</script>
<style scoped>
  .word-width {
    letter-spacing: 8px;
  }
</style>
